<template>
  <div class="popover" :style="popoverStyle" ref="popoverRef">
    <div class="header">
      <div class="bold fz16">{{info.className}}</div>
      <div class="fz14 date">{{info.date}}（{{proxy.$utils.getDayOfWeek(info.date)}}） {{info.classStartTime}}-{{info.classEndTime}}</div>
    </div>
    <div class="cell">授课课程：{{info.curriculumnName}}</div>
    <div class="cell">授课老师：{{info.teachingTeacher}}</div>
    <div class="cell">上课教室：{{info.classAddress}}</div>
    <div class="cell">上课人数：{{info.studentCount}} / {{info.classNum}}</div>
    <el-divider />
    <div class="cell" style="margin-top: 0px;">上课内容：{{info.teachingContent}}</div>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
let props = defineProps(["scheduleId", "mouseParams"]);
let info = ref({});
const popoverRef = ref();

let popoverStyle = computed(() => {
  let obj = {};

  if (props.mouseParams && props.mouseParams.clientX) {
    const rightDistance =
      document.documentElement.clientWidth - props.mouseParams.clientX;
    const bottomDistance =
      document.documentElement.clientHeight - props.mouseParams.clientY;
    // console.log(`距离右侧边缘还有：${rightDistance}px`);
    // console.log(`距离底部边缘还有：${bottomDistance}px`);
    const rect = proxy.$refs.popoverRef.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    // console.log(`popover宽度：${width}px`);
    // console.log(`popover高度：${height}px`);

    if (width > rightDistance) {
      obj["right"] = `${
        document.documentElement.clientWidth - props.mouseParams.clientX
      }px`;
    } else {
      obj["left"] = `${props.mouseParams.clientX}px`;
    }
    if (height > bottomDistance) {
      obj["bottom"] = `${
        document.documentElement.clientHeight - props.mouseParams.clientY
      }px`;
    } else {
      obj["top"] = `${props.mouseParams.clientY}px`;
    }

    obj["opacity"] = 1;
  } else {
    obj["opacity"] = 0;
  }
  return obj;
});

async function getInfo() {
  info.value = await proxy.$apis.teachingScheduleData({
    type: "details",
    data: { scheduleId: props.scheduleId },
  });
}

watch(
  () => props.scheduleId,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.popover {
  font-family: "Microsoft YaHei", sans-serif;
  transition: opacity 0.8s ease-in-out; /* 设置动画效果，2秒内完成，使用'ease-in-out'缓动函数 */
  opacity: 1; /* 初始状态透明度为0 */
  position: fixed;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 1px 5px 5px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  z-index: 9;
  .date {
    margin-top: 8px;
  }
  .cell {
    font-size: 12px;
    color: #6c6c6c;
    margin-top: 8px;
  }
  .el-divider {
    margin: 10px 0;
  }
}
</style>
